<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition template="/WEB-INF/templates/template.xhtml">     
        <style type="text/css">
            .ui-datepicker{ font-size: 9pt;} .ui-button{font-size: 12pt;}
            .ui-tabs{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} .ui-tabs-panel{font-size: 12px;} 
            .ui-toolbar-group-left{font-size: 12px} 
            .ui-datatable .ui-datatable-header {
                        text-align: left;
                    }
        </style>
        <ui:define name="toolbar">
            <h:form id="formToolbarTalla" >
                <p:panel  id="tallaToolbarPanel" visible="true" closeSpeed="300" closable="true" closeTitle="Cerrar" header="Gestión de Tallas/Alto: nombre del componente ingreso consulta"  style="font-size: 12px; border-width: 0px">

                    <p:toolbar  id="toolOpcionesTalla" >
                        <p:toolbarGroup align="left" >
                            <p:commandButton id="botonNuevoTalla" update=":formDialogoIngresarTalla" oncomplete="dialogoIngresoTalla.show()"  type="push" title="Nuevo Tipo de Tallas/Alto" icon="ui-icon-document" />
                            <p:separator />                                                     
                            <p:commandButton type="push" title="Eliminar Tipo de Tallas/Alto" icon="ui-icon-trash" oncomplete="dialogoEliminarTalla.show()" />                  
                            <p:separator  />
                            <p:commandButton  ajax="false" type="push" title="Imprimir" icon="ui-icon-print" />
                        </p:toolbarGroup>
                    </p:toolbar>

                </p:panel>
            </h:form> 
        </ui:define>      
        <ui:define name="body">  
            <p:panel id="panelConsultarTalla"  style="font-size: 12px; border-width: 0px">                   
                <p:tabView orientation="top" style=" top:14px;position: absolute; width: 97%" >
                    <p:tab id="tabTalla" title="Tallas/Alto(#{tallaWeb.tablaDatosTalla.size()} coincidencias)"  titleStyle="font-size: 12px;"   >
                        <h:panelGrid columns="1" cellpadding="1"  >
                            <h:form id="formTablaConsultarTalla" >
                                <p:dataTable  id="tablaConsultarTalla" var="consultarTalla" value="#{tallaWeb.tablaDatosTalla}" widgetVar="tablaConsultarTalla" 
                                              emptyMessage="Búsqueda finalizada, no existe talla con los criterios de búsqueda ingresados" resizableColumns="false" paginator="true" rows="10"  
                                              rowsPerPageTemplate="5,10,20,100" selectionMode="single" selection="#{tallaWeb.tallaSeleccionado}" rowKey="#{consultarTalla.codTalla}"       >
                                    <p:ajax  event="rowSelect" listener="#{tallaWeb.eventoFilaSeleccionadaTablaConsultarTalla()}" process="@this" update=":formDialogoEliminarTalla" /> 
                                    <p:column id="columnaCodTalla" sortBy="#{consultarTalla.codTalla}" filterBy="#{consultarTalla.codTalla}" headerText="Numero"  style="width:50%" >
                                        <h:outputText value="#{consultarTalla.codTalla}"  />
                                    </p:column> 
                                    <p:column id="columnaTallaAlto" sortBy="#{consultarTalla.tallaAlto}" filterBy="#{consultarTalla.tallaAlto}" headerText="Tipo: Talla / Alto"  style="width:100%" >
                                        <h:outputText value="#{consultarTalla.tallaAlto}"  />
                                    </p:column> 
                                    <f:facet  name="footer" >                                        
                                    </f:facet>
                                 </p:dataTable>
                            </h:form>
                        </h:panelGrid>
                    </p:tab>
                </p:tabView>                         
            </p:panel>            
            </ui:define>
            <ui:define name="dialogos" >            
            <!--Ingreso Talla -->
            <h:form id="formDialogoIngresarTalla">
                <p:dialog id="DialogoIngresarTalla" header="Ingreso de Nueva Tallas/Alto:" widgetVar="dialogoIngresoTalla" resizable="false" closable="false"  
                          modal="true" style="font-size: 12px">
                    <h:panelGrid columns="2" >
                        <p:panel style="width: 99px; height: 105px; ">
                            <h:outputText style="vertical-align: middle;font-weight: bold;text-align: right; height: 20px; width: 95px;left: 20px; top: 25px; position: absolute ; font-size: 12px" value="* Numero:"/>                            
                            <h:outputText style="vertical-align: middle;font-weight: bold;text-align: right; height: 20px; width: 95px;left: 20px; top: 55px; position: absolute ; font-size: 12px" value="* Tipo:"/>                            
                        </p:panel>
                        <p:panel style="width: 255px; height: 105px; border-width: 0px" >
                            <p:inputText id="textCodTalla"  disabled="false" style="width: 150px; font-size: 12px;left: 124px; top: 20px; position: absolute ; "/>                           
                            <h:selectOneMenu id="comboSeleccionarTallaAltoTalla" style="width: 150px;left: 125px; top: 50px; position: absolute ; font-size: 12px">
                                <f:selectItem itemLabel="Seleccione..." itemValue="0"  />
                                <f:selectItem itemLabel="Talla" itemValue="Talla"  />
                                <f:selectItem itemLabel="Alto" itemValue="Alto"  />                               
                            </h:selectOneMenu>
                            <p:separator style="left: 124px; top: 76px; position: absolute; width: 245px" />
                            <p:commandButton id="botonIngresarNuevaTalla" ajax="true" type="Submit" value="Guardar" actionListener="#{tallaWeb.clicBotonIngresarTalla()}"  update=":panelConsultarTalla" style="font-size: 12px ;left: 124px; top: 91px; width: 120px; position: absolute" icon="ui-icon-disk"/>
                            <p:commandButton id="botonCancelarIngresarNuevaTalla" value="Cancelar" type="push"       actionListener="#{tallaWeb.clicBotonResetearIngresarTalla()}"  update=":panelConsultarTalla" oncomplete="dialogoIngresoTalla.hide()" style="font-size: 12px ;left: 250px; top: 91px; position: absolute; width: 120px" icon="ui-icon-close" />
                        </p:panel>
                    </h:panelGrid>
                </p:dialog> 
            </h:form> 
            
            <!--Eliminacion Talla -->    
            <h:form id="formDialogoEliminarTalla"> 
                <p:confirmDialog message="Seguro desea eliminar la siguiente Tallas/Alto:" header="Eliminación de Tallas/Alto" severity="alert" 	
                     widgetVar="dialogoEliminarTalla" closable="false"  style="font-size: 12px">       
                    <h:panelGrid columns="2" cellpadding="1" > 
                        <h:outputText value="Talla:" style="font-size: 12px; font-weight: bold"/>
                        <h:outputText value="#{tallaWeb.tallaEliminar.codTalla}" style="font-size: 12px; font-weight: bold"/>                                                        
                    </h:panelGrid>
                    <p:separator  style="height: 0px" />
                    <p:commandButton ajax="false" value="Eliminar" actionListener="#{tallaWeb.clicBotonEliminarTalla()}"  oncomplete="dialogoEliminarTalla.hide()" process="@all" update="@all" style="font-size: 12px" />
                    <p:commandButton value="Cancelar" onclick="dialogoEliminarTalla.hide()" type="button" process="@none" update="@none" style="font-size: 12px" />         
              </p:confirmDialog>    
          </h:form>                   
            </ui:define>
        </ui:composition>
    </body>
</html>
